
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>各分类下的文章数量</title>
    </head>
    <body>
        <!--Step:2 Prepare a dom for ECharts which (must) has size (width & hight)-->
        <!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->
        <div id="main" style="height:460px;border:1px solid #ccc;padding:10px;"></div>
    </body>
    <!--Step:1 Import echarts-plain.js or echarts-plain-map.js-->
    <!--Step:1 引入echarts-plain.js或者 echarts-plain-map.js-->
    <script src="__PUBLIC__/js/echarts-plain-map.js"></script>
    <script type="text/javascript">
                // Step:3 echarts & zrender as a Global Interface by the echarts-plain.js.
                // Step:3 echarts和zrender被echarts-plain.js写入为全局接口
                var myChart = echarts.init(document.getElementById('main'));
                myChart.setOption({
                tooltip: {
                trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                        legend: {
                        orient: 'vertical',
                                x: 'left',
                                data: [{$titleStr}]
                        },
                        title:{
                            text:'各分类的文章数量统计图',
                            subtext:'Power By Clmao',
                            x:'center',
                        },
                        toolbox: {
                        show: true,
                                feature: {
                                mark: {show: true},
                                        dataView: {show: true, readOnly: false},
                                        restore: {show: true},
                                        saveAsImage: {show: true}
                                }
                        },
                        calculable: true,
                        series: [
                        {
                        name: '该分类文章数量',
                                type: 'pie',
                                radius: ['50%', '70%'],
                                itemStyle: {
                                normal: {
                                label: {
                                show: false
                                },
                                        labelLine: {
                                        show: false
                                        }
                                },
                                        emphasis: {
                                        label: {
                                        show: true,
                                                position: 'center',
                                                textStyle: {
                                                fontSize: '30',
                                                        fontWeight: 'bold'
                                                }
                                        }
                                        }
                                },
                                data: [
                                {$jsonStr}
                                ]
                        }
                        ]
                });


    </script>
</html>